<template>
  <!-- <MyHeader :data="headerData" /> -->
   <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" 
      status-bar left-icon="left" left-text="返回"  title="设备详情" @clickLeft="back" />
    <view class="content-wrap">
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control
          :current="current"
          :values="items"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
        />
      </view>
      <view class="content">
        <view v-if="current === 0">
          <DeviInfo v-if="checkPermission(['device:info'])" :search="search"/>
        </view>
        <view v-if="current === 1">
          <DeviBoard v-if="checkPermission(['device:board'])" :search="search"/>
        </view>
        <view v-if="current === 2">
          <DeviHistory v-if="checkPermission(['device:history'])" :search="search"/>
        </view>
        <view v-if="current === 3">
          <DeviAlarm v-if="checkPermission(['device:alarm'])" :search="search"/>
        </view>
      </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import DeviBoard from "@/pagesS1/device-info/devi-board.vue";
import DeviInfo from "@/pagesS1/device-info/devi-info.vue";
import DeviHistory from "@/pagesS1/device-info/devi-history.vue";
import DeviAlarm from "@/pagesS1/device-info/devi-alarm.vue";
import { usePermission } from '@/utils/permission'
const { checkPermission } = usePermission()
const back = () => {
  uni.navigateBack({ delta: 1 });
};
const items = ref(["设备信息", "实时监控", "历史报表", "报警记录"]);
const current = ref(0);
const styleType = ref("button");
const activeColor = ref("#007aff");

const search = ref({
  deviceId: undefined,
  deviceKey: "",
  deviceName: "",
});
const onClickItem = (e: any) => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
  }
};

onLoad((query) => {
    // 获取传递的参数
    search.value.deviceId = query?.deviceId;
    search.value.deviceKey = query?.deviceKey;
    search.value.deviceName  = query?.deviceName;
    console.log('search.value. :  ' + JSON.stringify(search.value));
});

onMounted(() => {
console.log('onMounted :  ');
});
</script>

<style scoped>

.uni-padding-wrap {
  margin-top: 15rpx;
  padding: 10rpx 20rpx;
}

.content-text {
  font-size: 14px;
  color: #666;
}

.color-tag {
  width: 25px;
  height: 25px;
}

.uni-list {
  flex: 1;
}

.uni-list-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex: 1;
  flex-direction: row;
  background-color: #ffffff;
}

.uni-list-item__container {
  padding: 12px 15px;
  width: 100%;
  flex: 1;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #eee;
}

.uni-list-item__content-title {
  font-size: 14px;
}

.content-wrap {
  /* margin-top: 210rpx; */
}
</style>
